<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>地图展示</title>
    <script src="http://api.map.baidu.com/getscript?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
    <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
    <script src="./chart/devision.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body,html {
        width: 100%;
        height: 100%;
    }
    .parent{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .list {
        width: 100%;
        height: 3rem;
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .listItem{
        width: 30%;
        height: 3rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .icon {
        display: block;
        width: 0;
        height: 0;
        border-bottom: 0.5rem solid #666;
        border-top: 0.5rem solid transparent;
        border-right: 0.5rem solid transparent;
        border-left: 0.5rem solid transparent;
        margin-left: 0.25rem;
        margin-top: -0.25rem;
    }
    .icon_wei {
        display: none;
    }
    #chart {
        width: 100%;
        height: 92.7%;
        margin: 0;
        padding: 0;
    }
    .listSon{
        width: 100%;
        position: absolute;
        top: 3rem;
        z-index: 9999;
        background-color: #fff;
        border-top: 1px solid #dbdbdb;
    }
    .sonItem {
        display: none;
    }
    .lists{
        width: 100%;
        height: 2.9rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        padding-left: 0.9rem;
    }
    .lists::after {
        position:absolute;
        content: "";
        height:1px;
        background:#d5d5d5;
        width:100%;
        bottom:0;
        left: 0;
        right: 0;
        -webkit-transform:scaleY(.5);
        -ms-transform:scaleY(.5);
        -o-transform:scaleY(.5);
        transform:scaleY(.5);
    }
    .choice {
        width: 100%;
        height: 2.9rem;
        background: #f5f5f5;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .choiceItem{
        width: 80%;
        height: 2.9rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding-left: 0.5rem;
        overflow-y: scroll;
    }
    .placeName{
        /* padding-right: 15px; */
        font-size: 1rem;
        font-family:PingFangSC-Regular;
        color:rgba(35,196,160,1);
        border-bottom: 1px solid rgba(35,196,160,1);
    }
    .placeCont {
        height: 2.9rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        word-break: keep-all;
        background: #f5f5f5;
    }
    .sure{
        width: 3.2rem;
        height: 1.8rem;
        background-color:rgba(35,196,160,1);
        border-radius:0.5rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-right: 0.5rem;
    }
    .sureBtn{
        color: #fff;
    }
    .standardDirection{
        color: #999;
        padding-left: 0.1rem;
        padding-right: 0.1rem;
    }
    .standardDirection:first-child{
        border: none;
    }
</style>
<body>
    <div class="parent">
        <ul class="list">
            <li class="listItem">
                <span class="text">查找村庄</span><span class="icon"></span>
            </li>
            <li class="listItem">
                <span class="text">查找设施</span><span class="icon"></span>
            </li>
            <li class="listItem">
                <span class="text">卫星图</span>
            </li>
        </ul>
        <div class="listSon">
            <div class="sonItem">
                <ul class="cont">
                    <li class="choice">
                        <div class="choiceItem">
                            <!-- <p class="placeCont">
                                <span class="standardDirection" v-if="ind != '0'">></span><span class="placeName" ref="placeOne">北京</span>
                            </p> -->
                        </div>
                        <div class="sure">
                            <div class="sureBtn">确定</div>
                        </div>
                    </li>
                    <li class="lists">北京</li>
                    <li class="lists">上海</li>
                    <li class="lists">天津</li>
                    <li class="lists">重庆</li>
                    <li class="lists">山东</li>
                </ul>
            </div>
            <div class="sonItem">
                <ul class="cont">
                    <li class="lists">北京</li>
                    <li class="lists">北京</li>
                    <li class="lists">北京</li>
                    <li class="lists">北京</li>
                    <li class="lists">北京</li>
                    <li class="lists">北京</li>
                    <li class="lists">北京</li>
                    <li class="lists">北京</li>
                </ul>
            </div>
            <div class="sonItem">
                <ul class="cont">
                    <li class="lists">北京</li>
                    <li class="lists">北京</li>
                    <li class="lists">北京</li>
                    <li class="lists">北京</li>
                    <li class="lists">北京</li>
                    <li class="lists">北京</li>
                    <li class="lists">北京</li>
                    <li class="lists">北京</li>
                    <li class="lists">北京</li>
                    <li class="lists">北京</li>
                    <li class="lists">北京</li>
                </ul>
            </div>
        </div>
        <div id="chart"></div>
    </div>
</body>
</html>
<script src="./rem.js"></script>
<script src="./jquery-3.1.1.min.js"></script>
<script>
    $(function () {
        let listItem = $('.listItem')
        let sonItem = $('.sonItem')
        let icon = $('.icon')
        let choiceItem = $('.choiceItem')
        let len = listItem.length
        let flag = [false, false, false]
        let placeNameAll = []
        let placeName
        let HTML = null
        let thisParent
        let ind
        $.each(listItem, function(index,item){
            $(item).on('click',function(){
                if (flag[index]) { 
                    sonItem.eq(index).css({ 'display':'none'})
                    listItem.eq(index).css({ 'background': '', 'color': '' })
                    icon.eq(index).css({ 'transform': '', 'borderBottom': '0.5rem solid #666', 'marginTop': '-0.5rem'})
                    flag[index] = false
                } else {
                    for(var j=0;j<len;j++){
                        sonItem.eq(j).css({ 'display':'none'})
                        listItem.eq(j).css({ 'background': '', 'color': '' })
                        icon.eq(j).css({ 'transform': '', 'borderBottom': '0.5rem solid #666', 'marginTop': '-0.5rem'})
                        flag[j] = false
                    }
                    sonItem.eq(index).css({ 'display':'block'})
                    listItem.eq(index).css({ 'background': 'rgba(35, 196, 160, 1)', 'color': '#fff' })
                    icon.eq(index).css({ 'transform': 'rotate(180deg)', 'borderBottom': '0.5rem solid #fff', 'marginTop': '1rem'})
                    flag[index] = true
                    let lists = sonItem[index].getElementsByClassName('lists')
                    ind = index
                    $.each(lists, function(index, item) {
                        placeNameAll = []
                        $(item).on('click', function() {
                            placeNameAll.push($(this).text())
                            $(this).css({ 'background': 'rgba(35, 196, 160, 1)', 'color': '#fff'}).siblings('.lists').css({ 'background': '#fff', 'color': ''})
                            let len = placeNameAll.length
                            thisParent = $(this).parents('.sonItem')
                            $.each(placeNameAll, function (index, item) {
                                if (index == 0) {
                                    HTML = `<p class="placeCont">
                                        <span class="placeName" ref="placeOne">${placeNameAll[len-1]}</span>
                                    </p>`
                                } else {
                                    HTML = `<p class="placeCont">
                                        <span class="standardDirection">></span><span class="placeName" ref="placeOne">${placeNameAll[len-1]}</span>
                                    </p>`
                                }
                            })
                            choiceItem.append(HTML)
                            placeName = $('.placeName')
                            $.each(placeName, function (index, item) {
                                $(item).on('click', function() {
                                    $(this).parents('.placeCont').remove()
                                    len--
                                    placeNameAll.splice(len, 1)
                                })
                            })
                            // $(this).css({ 'background': 'rgba(35, 196, 160, 1)', 'color': '#fff'}).siblings().css({ 'background': '#fff', 'color': ''})
                            // $('.listItem').eq(ind).css({ 'background': '', 'color': '' })
                            // $('.listItem').eq(ind).find('.icon').css({ 'transform': '', 'borderBottom': '0.5rem solid #666', 'marginTop': '-0.5rem'})
                            // $(this).parents('.sonItem').css({ 'display':'none'})
                            
                        })
                    })
                }
            })
        })
        $('.sure').on('click', function () {
            placeNameAll = []
            $('.choiceItem').empty()
            // console.log(placeNameAll)
            if (flag[ind]) {
                if (HTML == null) {
                    $('.sonItem').css({ 'display': 'none'})
                    $('.listItem').eq(ind).css({ 'background': '', 'color': '' })
                    $('.listItem').eq(ind).find('.icon').css({ 'transform': '', 'borderBottom': '0.5rem solid #666', 'marginTop': '-0.5rem'})
                    $('.lists').css({ 'background': '#fff', 'color': '#000'})
                    flag[ind] = false
                } else {
                    $(thisParent).css({ 'display': 'none'})
                    $('.listItem').eq(ind).css({ 'background': '', 'color': '' })
                    $('.listItem').eq(ind).find('.icon').css({ 'transform': '', 'borderBottom': '0.5rem solid #666', 'marginTop': '-0.5rem'})
                    $('.lists').css({ 'background': '#fff', 'color': '#000'})
                    flag[ind] = false
                }
            }
        })
    })
    var myChart = echarts.init(document.getElementById('chart'))
    myChart.setOption({
        bmap: {
            center: [116.46, 39.92],
            zoom: 10,
            roam: true
        },
        series: [{
            type: 'map',
            coordinateSystem: 'bmap',
            polyline: true,
            data: devision,
            silent: true,
            progressiveThreshold: 500,
            progressive: 200
        }]
    });
        
</script>